

<template>
  <dv-border-box-7  :color="['#084FA0','#06073B']" >
    <div class="container">
      <div class="title_container">
        <span  class="title"></span>
        <span style="margin-left: 10px;font-size:22px;"> 长者分布</span>
      </div>
      <div>
        <div
            ref="currentConfirmedComoareBarChart"
            style="width: 100%; height: 300px;margin-top: 30px"
        ></div>
      </div>
    </div>
  </dv-border-box-7>
</template>
<script>
import * as echarts from 'echarts'
let chart = null
export default {
  // props: {
  //   title: String,
  //   data: Object
  // },
  data(){
     return{
         data:{
               "dateList": [],
                "currentConfirmedCountList": [],
                "confirmedCountList": []
}
     }
  },
  mounted() {
    this.$nextTick(()=>{
      this.initChart()
    })

  },
  methods: {
    initChart () {
      if (null != chart && undefined != chart) {
        chart.dispose()
      }

      chart = echarts.init(this.$refs.currentConfirmedComoareBarChart)
      this.setOptions()
    },
    setOptions() {
      let option = {
        title: {
          text: this.title,
          x: 'center',
          y: 0,
          textStyle: {
            color: '#B4B4B4',
            fontSize: 14,
            fontWeight: 'normal',
          },

        },
        // backgroundColor: '#191E40',
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#040737',
          borderColor: '#0E8BFF', // 设置边框颜色，这里是绿色
          borderWidth: 2, // 设置边框宽度，这里是2像素
          textStyle: { // 设置文本样式
            color: '#ffffff', // 设置文本颜色
            fontSize: 16 // 设置文本字体大小
          },
          axisPointer: { // 禁用轴线
            type: 'none',
          },
          formatter: function (params) {


            return `<div> ${params[0].name}</div>
             <div><span style="width: 9px;height: 9px;background:#1CDBFE;border-radius: 50%;display: inline-block"></span> <span>${params[0].seriesName}:</span><span>${params[0].value}</span></div>
             <div><span  style="width: 9px;height: 9px;background: #D4B733;border-radius: 50%;display: inline-block"></span> <span>${params[1].seriesName}:</span><span>${params[1].value}</span></div>
             <div><span  style="width: 9px;height: 9px;background: #FFFDF6;border-radius: 50%;display: inline-block"></span> <span>${params[2].seriesName}:</span><span>${params[2].value}</span></div>
            `
          }.bind(this),
          // axisPointer: {
          //   type: 'shadow',
          //   label: {
          //     show: true,
          //     backgroundColor: '#7B7DDC'
          //   }
          // }
        },
        legend: {
          data: ['男性', '女性'],
          // right: 10,
          // textStyle: {
          //   color: '#B4B4B4'
          // },
          // top: '5%',
          left: "70%",
          top: 0,
          itemWidth: 14,
          itemHeight: 14,
          textStyle: {
            color: '#084FA0',
            fontSize: 14
          }
        },

        calculable: true,
        grid: {
          x: '12%',
          width: '85%',
          y: '12%',

          // top: "15%",
           left: "13%",
          // right: "2%",
          // bottom: "2%",
          // containLabel: true
        },
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        xAxis: {
          data: ["60~64","65~70","71~75","76~80","81~85","86~90","90以上"],
          axisLine: {
            lineStyle: {
              color: '#4FA6F7'
            }
          },
          axisLabel:{
            interval:0,
            // rotate:30
          },
          axisTick: {
            show: false,
          },
        },
        nameTextStyle:{//轴标题，在xAxis或yAxis根下
          color:'#4FA6F7',
          padding: [0,40,0,0],
          fontSize:12
        },
        yAxis: [{
          splitLine: { show: false },
          name: "(人)",
          axisLine: {
            lineStyle: {
              color: '#4FA6F7',
            }
          },
          axisLabel: {
            formatter: '{value} ',
            width: 100
          }
        },
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: '#B4B4B4',
              }
            },
            axisLabel: {
              formatter: '{value} ',

            }
          }],

        series: [
          {
            name: '男性',
            type: 'bar',
            stack: "总量",
            barWidth: 20,
            itemStyle: {
              normal: {
                 barBorderRadius: [10,10,0,0],

                color:
                    {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                        offset: 0,
                        color: 'rgba(28, 219, 254, 1)' // 0% 处的颜色
                      }, {
                        offset: 1,
                        color: 'rgba(21, 25, 82, 0)' // 100% 处的颜色
                      }],
                      global: false // 缺省为 false
                    }
              }
            },
            data: [20324,11040,14418,30664,46546,23042,10302]
          },
          {
            name: '女性',
            type: 'bar',
             barGap: '-100%',
            stack: "总量",
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: [10,10,0,0],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(228, 196, 49, 1)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(21, 25, 82, 0)' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
                // color: new echarts.graphic.LinearGradient(
                //     0, 0, 0, 0.5,
                //     [
                //
                //
                //       { offset: 0, color:  '#E4C431' },
                //       { offset: 1, color: '#151952' },
                //     ]
                // )
              }
            },
            z: -12,
            data: [22103,11541,14336,26385,53902,33697,19333]
          },
          {
            name: "总数",
            type: "line",
            symbolSize: 10,
            symbol: 'circle',
            itemStyle: {
              "normal": {
                "color": 'rgba(255, 255,255, 0)',
                "barBorderRadius": 0,
              }
            },
            data:[42427,22581,28754,57049,99755,56739,29635]
          }
        ]
      }
      chart.setOption(option)
    }
  },
  watch: {
    data: {
      handler (newValue, oldValue) {
        if (oldValue != newValue) {
          this.setOptions()
        }
      },
      deep: true
    }
  }
}
</script>
<style scoped lang="scss">
.dv-border-box-7{
  border-radius: 3px;
  position: relative;
  height: 310px;
  .container{
    padding: 10px;
    .title_container{
      position: absolute;
      color: #1CDBFE;
      left: 20px;
      top:20px;
      display: flex;
      align-items: center;
      .title{
        width: 15px;
        height: 28px;
        background: #1CDBFE;
        border-radius: 9px;
        display: inline-block;
      }
    }

  }
}
    :deep(.dv-border-svg-container) {
      display: none;
    }
</style>
